<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>...</title>
 <style>
	ul{list-style:none}
	ul>li{
		float:left;
		width:60px; height:40px;
		border:1px solid #555;
		text-align:center; line-height:40px;
	}
	/*ul>li:first-child{ border-radius:6px 0 0 6px }
	ul>li:last-child{ border-radius:0 6px 6px 0 }
	ul>li+li{ border-left:0 }*/

	table{ 
		width:500px;
		border-collapse: collapse;
	}
	thead{
		border-bottom:3px solid #555;
	}
	/*tbody>tr+tr{
		border-top:1px solid #555;
	}
	tbody>tr:nth-child(2n){
		background-color:pink
	}*/
 </style>
</head>
<body>
  <h1>实现按钮组效果</h1>
  <ul>
		<li>|&lt;</li>
		<li>○</li>
		<li>▷</li>
		<li>&gt;|</li>
	</ul>
	<script src="../js/jquery-1.11.3.js"></script>
	<script>
		$("ul>li:first")
			.css("border-radius","6px 0 0 6px")
			//return $firstli
			.nextAll() //之后所有元素
			.css("border-left","0")
			//return $nextAll
			.last() //之后所有元素中最后一个
			.css("border-radius","0 6px 6px 0")
			
	</script>
	<div style="clear:both"></div>

	<h1>实现表格隔行变色效果</h1>
	<table>
		<thead>
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>亮</td>
				<td>成</td>
				<td>@liang</td>
			</tr>
			<tr>
				<td>2</td>
				<td>燕</td>
				<td>杨</td>
				<td>@miemie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>东</td>
				<td>张</td>
				<td>@dong</td>
			</tr>
		</tbody>
	</table>
	<script>
		$("tbody>tr:gt(0)")
			.css("border-top","1px solid #555")
		$("tbody>tr:odd")
			.css("background-color","pink")
	</script>
</body>
</html>
